import React, { useState, useRef } from 'react';

const App = () => {
  const [name, setName] = useState('');
  const [list, setList] = useState<string[]>([]);

  const myRef = useRef<HTMLInputElement>(null);
  return (
    <div>
      <div>
        <h1>1</h1>
        <div>
          <input
            type="text"
            value={name}
            onChange={(evt) => setName(evt.target.value)}
          />
          <button
            onClick={() => {
              if (!name) {
                return;
              }
              setList([...list, name]);
              setName('');
            }}
          >
            add
          </button>
        </div>
        <ul>
          {list.map((item, index) => {
            return (
              <li key={item}>
                <span>{item}</span>
                <button
                  onClick={() => {
                    let arr = [...list];
                    arr.splice(index, 1);
                    setList(arr);
                  }}
                >
                  del
                </button>
              </li>
            );
          })}
          {list.length === 0 && <li>暂无待办事项</li>}
        </ul>
      </div>
      <div>
        <h1>2</h1>
        <input
          type="text"
          ref={myRef}
        />
        <button
          onClick={() => {
            console.log((myRef.current as HTMLInputElement).value);
          }}
        >
          click
        </button>
      </div>
    </div>
  );
};

export default App;
